<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .clearfix {padding:0;margin:0;font-size:12px;}
    .fl {float:left}
    .fr {float:right}
    .dn {display:none}
    /*日历 begin*/
    .data_box {width:220px; }
    .showDate{width:218px;height:28px;line-height:28px;padding:0 5px;border:1px solid #e1e1e1;color:#999;}
    .show_mn{text-align:center;padding:0 20px;}
    .sel_date{margin-top:1px;border:1px solid #d0d8e0;}
    .data_table {width:100%;margin-top:1px;}
    .data_table td{text-align:center;cursor:pointer;height:20px;font-size:10px;}
    .data_table td.active {color:#fff;background-color:#999}
    .data_table td.hover{color:blue;}
    .showDate2{width:40px;padding:3px 5px;color:#FFFFFF;border:0px solid #e1e1e1;text-align:center;font-size: 14}
    .showDate2.active{border:1px solid #c50000; }
    .prev_m,.next_m {width:10px;display:block;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体"}
    .prev_y,.next_y {width:18px;display:block;color:#fff;cursor:pointer;text-align:center;font: bold 12px/22px "宋体";margin:0 5px;}

    /*日历 end*/
    .hasevent{
        border:1px solid darkgreen;
    }
</style>
<script type="text/javascript" src="/component/layer/layer.js"></script>
<script type="text/javascript">
    //日历中所有的TD
    var $allTdObj;

    LiChang = {
        getByClass: function (oPare, cla) {
            var oChild = oPare.getElementsByTagName("*");
            var arr = [];
            for (var i = 0; i < oChild.length; i++) {
                var arrCla = oChild[i].className.split(" ");
                var j;
                for (var j in arrCla) {
                    if (arrCla[j] == cla) {
                        arr.push(oChild[i]);
                        break;
                    }
                }
            }
            return arr;
        }
    }
    function showDate(option) {
        this.obj = document.getElementById(option.id);
    }
    showDate.prototype.init = function () {
        var _self = this;
        _self.dateText = LiChang.getByClass(_self.obj, "showDate")[0];
        _self.dateBox = LiChang.getByClass(_self.obj, "sel_date")[0];
        _self.yearBox = LiChang.getByClass(_self.obj, "year")[0];
        _self.mnBox = LiChang.getByClass(_self.obj, "month")[0];

        _self.dataTable = LiChang.getByClass(_self.dateBox, "data_table")[0];
        _self.tbody = _self.dataTable.tBodies[0];
        _self.td = _self.tbody.getElementsByTagName("td");
        _self.prevM= LiChang.getByClass( _self.dateBox,"prev_m")[0];
        _self.nextM = LiChang.getByClass(_self.dateBox, "next_m")[0];
        _self.prevY = LiChang.getByClass(_self.dateBox, "prev_y")[0];
        _self.nextY = LiChang.getByClass(_self.dateBox, "next_y")[0];

        _self.show();
        _self.showNow();

        //点击选择日期
        for (var i = 0; i < _self.td.length; i++) {
            _self.td[i].onclick = function () {
                var newDd = this.innerHTML;
                var newYear = _self.yearBox.innerHTML;
                var newMn = _self.mnBox.innerHTML;
                if (newDd.match(/^\s{0}$/g)) {  //如果td有值;
                    return false;
                }
                _self.dateText.value = newYear + "年" + newMn + "月" + newDd + "日";
                for (var i = 0; i < _self.td.length; i++) {
                    _self.td[i].className="";
                    if (newDd==_self.td[i].innerHTML){
                        _self.td[i].className="active";
                        //window.open('${basePath}/s/uc/shd/f?no=2&q=http%3A%2F%2Fapexedu.com.cn%3A8109%2FUIProcessor%3FTable%3DSHDL-Schedule%26Creator%3Dschedule%26ContextConfig%3Dschedule');
                        window.open('${basePath}/s/uc/c/index');
                    }
                }
            }

        }
        //点击切换月份
        _self.prevM.onclick =_self.nextM.onclick= function () {
            _self.changeMn(this);
            return this;
        }

        //加载日程安排
        setEvent();

    }
    //点击切换月份
    showDate.prototype.changeMn = function (obj) {
        var _self = this;
        var NewMn = parseInt(_self.mnBox.innerHTML, 10);

        var newYear = parseInt(_self.yearBox.innerHTML, 10);
        if (obj == _self.nextM) {
            NewMn++;
        } else {
            NewMn--;
        }
        if (NewMn < 1) {
            NewMn = 12;
            newYear -= 1;
        } else if (NewMn > 12) {
            NewMn = 1;
            newYear += 1;
        }
        _self.mnBox.value = NewMn;
        _self.showNow(newYear, NewMn);
    }
    //点击切换年份
    showDate.prototype.changeYr = function (obj) {
        var _self = this;
        var NewMn = parseInt(_self.mnBox.innerHTML, 10);
        var newYear = parseInt(_self.yearBox.innerHTML, 10);
        if (obj == _self.nextY) {
            newYear++;
        } else {
            newYear--;
        }
        if (newYear < 1900) {
            newYear = 1900;
        } else if (newYear > 2099) {
            newYear = 2099;
        }
        _self.mnBox.value = NewMn;
        _self.showNow(newYear, NewMn);
    }
    //文本框 清空初始值
    showDate.prototype.changeDefault = function (obj) {
        var _self = this;
        var deVal = obj.defaultValue;
        if (obj.value == deVal) {
            obj.value = "";
        }
    }
    //文本框 还原初始值
    showDate.prototype.changeDefault2 = function (obj) {
        var _self = this;
        var deVal = obj.defaultValue;
        if (obj.value.match(/^\s{0}$/)) {
            obj.value = deVal;
        }
    }
    //显示日历
    showDate.prototype.show = function () {
        var _self = this;
        if (_self.dateBox.className.indexOf("dn") != -1) {
            var cls = _self.dateBox.className;
            _self.dateBox.className = cls.replace("dn", "");
        }
    }
    //隐藏日历
    showDate.prototype.hide = function (event, Target, obj) {
        var _self = this;
        var oPare = Target.parentNode;
        var isChild = true; //默认是子元素
        if (oPare == obj || Target == obj) {
            isChild = false;
        } else {
            loop: while (oPare != _self.obj) {
                oPare = oPare.parentNode;
                if (oPare == obj) {
                    isChild = false;
                    break loop;
                }
            }
        }
        if (!isChild && _self.dateBox.className.indexOf("dn") == -1) {
            _self.dateBox.className += " ";
            _self.dateBox.className += "dn";
            _self.changeDefault2(_self.dateText);
        }

    }
    //填充年、月
    showDate.prototype.showNow = function (yr,mn) {
        var _self = this;
        var now = new Date();
        var year = yr || now.getFullYear();
        var month = mn-1 || now.getMonth();
        var dd = now.getDate();
        //填充 年 和 月
        _self.yearBox.innerHTML = year;
        _self.mnBox.innerHTML = mn || now.getMonth()+1;
        //填充日期
        _self.showAllDay(year, month, dd);
    }
    //填充当月的所有日期
    showDate.prototype.showAllDay = function (Yr, Mn, Dd) {
        var _self = this;
        var arr31 = [1, 3, 5, 7, 8, 10, 12];
        var is31 = true;
        var newDd = new Date();  //根据传入的数值生成新的日期
        newDd.setFullYear(Yr,Mn,Dd);
        var year = newDd.getFullYear(),
                month = newDd.getMonth(),
                dd = newDd.getDate();

        var firstD = new Date();
        firstD.setFullYear(year, month, 1);
        var firstDay = firstD.getDay();

        var str31 = arr31.join(",");
        var regExp = eval("/" + (month + 1) + ",|," + (month + 1) + ",|," + (month + 1) + "/g");
        var dayLen = 31;
        //判断每个月有多少天
        if (str31.search(regExp) == -1) {
            dayLen = 30;
        }
        //清空日期
        for (var i = 0; i < _self.td.length; i++) {
            _self.td[i].innerHTML = "";
            _self.td[i].className = _self.td[i].className.replace("active", "");
        }
        //如果有31天
        for (var j = 0; j < dayLen; j++) {
            _self.td[j + firstDay].innerHTML = j + 1;
            if (j + 1 == dd && _self.td[j + firstDay].className.indexOf("active")==-1) {
                _self.td[j + firstDay].className += " ";
                _self.td[j + firstDay].className += "active";
            }
        }
    }

    //函数调用
    window.onload = function () {

        var showDate1 = new showDate({ id: "data_box" });
        showDate1.init();
    }


    function openDebugWindow(uri) {
        window.open(uri, "");
    }

    //设置指定td的class属性
    function setTdClass(day,title){
        for(var i=0;i<$allTdObj.length;i++ ){
            var td = $allTdObj[i];
            if(day==$(td).html()){
                $(td).css("color","red").attr("title",title).mouseover(function(){
                    layer.tips($(this).attr("title"),this);
                });;
                break;
            }
        }
    }

    //设置日程
    function setEvent(){
        $.post("/s/uc/c/montheveryday",function(result){
            $allTdObj= $("#data_box td");

            $.each( result, function(i, n){
                //console.debug( "Item #" + i + ": " + n );
                var start = n["start"];
                var title = n["title"];
                start=start.substr(8,start.length);
                if (start.length>1){
                    var temp=start.substr(0,1);
                    if (temp=='0'){
                        start=start.substr(1,2);
                    }
                }
                setTdClass(start,title);

            });
        },'json');
    }

</script>
<div class="clearfix dome3_box" style="width: 100%;">
    <!--日历 begin-->
    <div class="data_box" id="data_box"  style="width: 100%;">
        <input type="hidden"  class="showDate" value="点击选择日期" />
        <div class="sel_date dn"  style="width: 100%;">
            <div class="clearfix" style="height:48px; line-height:48px;background-image: url('${basePath}/resources/images/shd/rili_mid.png');position: relative;width: 100%;">
                <span class="prev_m fl" style="width:37px; height:48px; line-height:48px;background-image: url('${basePath}/resources/images/shd/rili_left.png');position: absolute;left:0;top:0;"></span>
                <span class="next_m fr" style="width:33px; height:48px; line-height:48px;background-image: url('${basePath}/resources/images/shd/rili_right.png');position: absolute;right:0;top:0;"></span>
                <div class="show_mn" style="height:48px; line-height:48px;">
                    <span class="showDate2 year" ></span>
                    <span class="ml5 mr5" style="color: #FFFFFF;font-size: 14px;">年</span>
                    <span class="showDate2 month" ></span>
                    <span class="ml5" style="color: #FFFFFF;font-size: 14px;">月</span>
                </div>
            </div>
            <table class="data_table" border="0">
                <thead>
                <tr style="color:red">
                    <td width="14%">周日</td><td width="14%">周一</td><td width="14%">周二</td><td width="14%">周三</td><td width="14%">周四</td><td width="14%">周五</td><td width="14%">周六</td>
                </tr>
                </thead>
                <tbody>
                <tr style="height:25px;">
                    <td >1</td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr style="height:25px;">
                    <td>1</td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr style="height:25px;">
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr style="height:25px;">
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr style="height:25px;">
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                <tr style="height:25px;">
                    <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!--日历 end-->
</div>

</script>